{extend name="layout" /}

{block name="title"}
<title>操作按钮 - thinkPHP极速后台开发</title>
<meta name="title" content="操作按钮 - thinkPHP极速后台开发">
<meta name="keywords" content="操作按钮,php,后台开发包，thinkphp、easyadmin、admin,easy,thinkeasyadmin">
<meta name="description" content="列表页面,表单页面,详情页面的各种按钮配置;easyadmin灵活可定制的thinkphp的后台开发工具包,助你快速开发后台">
{/block}

{block name="main"}


<fieldset class="layui-elem-field">
    <legend>操作按钮</legend>
    <div class="layui-field-box">


        <p>列表页面,编辑/添加页面,查看详情页面;一般都有响应的操作按钮;</p>
        <p>系统每个页面都自带一套操作按钮</p>
        <p>可通过<code>disabledAction</code>属性禁用系统的操作按钮</p>

        <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;

class Category extends \easyadmin\controller\Admin
{
    //不显示 删除按钮 ;
    protected $disabledAction = ['delete'];// new edit show  delete , 默认4种按钮都显示
}
        </pre>

        <p>也可以同<code>addAction</code>方法自己任意添加按钮</p>

        <fieldset id="liseField" class="layui-elem-field layui-field-title">
            <legend>addAction 方法 参数说明:</legend>
            <div class="layui-field-box">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>字段</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>必填</th>
                        <th>默认值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>name</td>
                        <td>按钮显示名称</td>
                        <td>string</td>
                        <td>是</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>url</td>
                        <td>按钮的URL;  添加 options.format 后失效<br>
                            <code>javascript:</code>: 点击按钮不做任何操作, 自己通过 class 绑定事件 <br>
                            <code>完整的http地址</code>: 例如: http://easyadmin.wansh.cc/ <br>
                            <code>window.xxxxx</code>: js的window.xxx 处理; 例如 window.history.back();
                            window.location.reload();
                            <br>
                            <code>一个字符串</code>: 会调用 thinkphp6 的 url 生成方法 url('xxxx') <br>
                        </td>
                        <td>string</td>
                        <td>是</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>options</td>
                        <td>按钮的选项</td>
                        <td>array</td>
                        <td>否</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>options.class</td>
                        <td>options 中的 class ; 给按钮增加额外的 class 样式</td>
                        <td>string</td>
                        <td>否</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>options.icon</td>
                        <td>options 中的 icon ; 设置按钮的 icon ,参考 layui 的ICON</td>
                        <td>string</td>
                        <td>否</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>options.params</td>
                        <td>options 中的 params ; 设置按钮的 参数</td>
                        <td>array</td>
                        <td>否</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>options.template</td>
                        <td>options 中的 template ; 设置按钮的模板渲染路径, 会在project\app\admin\views\ 目录中查找</td>
                        <td>string</td>
                        <td>否</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>options.confirm</td>
                        <td>options 中的 confirm ; 点击按钮的是否弹窗一个 确认询问弹窗; 如果需要,直接 填写 提示的内容文案</td>
                        <td>string</td>
                        <td>否</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>options.btn_type</td>
                        <td>options 中的 btn_type ; 按钮的类型 <br>
                            <code>a</code>: a 素 a 标签 <br>
                            <code>btn</code>: layui-button a 标签 添加了 layui-button 样式 <br>
                            <code>button</code>: button-button button标签 type button <br>
                            <code>submit</code>: button-submit button标签 type submit
                        </td>
                        <td>string</td>
                        <td>否</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>options.referer</td>
                        <td>options 中的 referer ; 用户点击执行完成以后,是否跳转回来源页面</td>
                        <td>bool</td>
                        <td>否</td>
                        <td>false</td>
                    </tr>
                    <tr>
                        <td>options.condition</td>
                        <td>
                            <code>列表表格中的按钮可用</code>; options 中的 condition ; 判断是否显示这个按钮, 返回真显示
                            <pre class="php">
$page->addAction('打款', 'ali_pay', [
    'icon' => 'layui-icon layui-icon-spread-left',
    'class' => ['layui-btn-danger', 'layui-btn-xs'],
    'confirm' => '确定要打款吗? 提交后不可撤销!',
    'condition' => function ($row) {
        if ($row['u_is_disabled']) {
            return false;
        }
        // 返回 true 页面显示这个操作按钮
        return $row['is_complete'] == 0 && $row['type'] == 1;
    }
]);
                            </pre>
                        </td>
                        <td>函数</td>
                        <td>否</td>
                        <td>false</td>
                    </tr>
                    <tr>
                        <td>options.format</td>
                        <td>
                            <code>覆盖 url 参数</code>; 如果使用 url 不能满足需求；可尝试使用 format
                            <pre class="php">
$page->addAction('打款', false, [
    'icon' => 'layui-icon layui-icon-release',
    'class' => ['layui-btn-primary', 'layui-btn-xs'],
    'format'=>function($row){
        // 当前行的 数据 数组
        return url('admin/app_keyword/lists',['app_id'=>$row['id']]);
    }
]);
                            </pre>
                        </td>
                        <td>函数</td>
                        <td>否</td>
                        <td>false</td>
                    </tr>
                    <tr>
                        <td>options.url_no_id</td>
                        <td>
                            <code>配置 options.format 后生效</code>; url_no_id:true, 则默认不在URL 后面追加 id 参数
                        </td>
                        <td>bool</td>
                        <td>否</td>
                        <td>false</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加按钮示例</legend>
            <div class="layui-field-box">
                <p><b>(a) </b>列表页面添加按钮</p>
                <p>列表页面默认会有一个添加按钮; 表格会有,查看,编辑,删除 按钮;自定义按钮就重写<code>configList</code>方法来实现自己的需求: </p>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;

use easyadmin\app\libs\PageList;
use easyadmin\app\libs\Btn;

class Category extends \easyadmin\controller\Admin
{
    /**
     * 定义列表字段
     * @param PageList $page
     */
    protected function configList(PageList $page)
    {
        //定义表格 行的 操作按钮
        $page
            ->addAction('查看', 'show', [
                'icon' => 'layui-icon layui-icon-release',
                'class' => ['layui-btn-primary', 'layui-btn-xs'],
            ])
            ->addAction('编辑', 'edit', [
                'icon' => 'layui-icon layui-icon-edit',
                'class' => ['layui-btn-primary', 'layui-btn-xs']
            ])
            ->addAction('删除', 'delete', [
                'icon' => 'layui-icon layui-icon-delete',
                'class' => ['layui-btn-danger', 'layui-btn-xs'],
                'confirm' => '确定要删除数据吗?',

                 // 是否显示删除按钮
                'condition' => function ($row){
                    // $row  是表格中 一行的数据
                    return $row['filed']==1;
                 }
            ]);

        //定义页面的添加按钮
        $addBtn = new Btn();
        $addBtn->setLabel('添加');
        $addBtn->setUrl('add');
        $addBtn->setIcon('layui-icon layui-icon-add-1');
        $page->setActionAdd($addBtn);
    }
}
</pre>

                <p><b>(b) </b>添加编辑页面按钮</p>
                <p>添加编辑页面默认有 返回 保存 和 删除 按钮 ; 如果不能满足需求,只需要重写 <code>configFormAction</code>方法实现自己的业务;</p>
                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;
use easyadmin\app\libs\Actions;


class Category extends \easyadmin\controller\Admin
{

    /**
     * 添加和更新页面的操作按钮
     * @param Actions $action
     * @throws ExceptionAlias
     */
    protected function configFormAction(Actions $action)
    {
        $id = $this->request->get($this->pk);

        $params = [];
        if ($id) {
            $params = [$this->pk => $id];
        }

        $action
            ->addAction('取消', 'window.history.back();', [
                'icon' => 'layui-icon layui-icon-return',
                'class' => ['layui-btn-primary'],
                'params' => $params
            ])
            ->addAction($id ? '更新' : '添加', 'javascript:', [
                'icon' => 'layui-icon layui-icon-ok',
                'params' => $params,
                'btn_type' => 'submit',
            ]);

        if ($id) {
            $action->addAction('删除', 'delete', [
                'icon' => 'layui-icon layui-icon-delete',
                'class' => ['layui-btn-danger'],
                'confirm' => '确定要删除数据吗?',
                'params' => $params
            ]);
        }

    }

}

</pre>

                <p><b>(b) </b>查看详情页面按钮</p>
                <p>查看详情页面按钮默认配置, 返回,编辑和删除按钮, 如果不能满足需求,只需要重写 <code>configShowAction</code>方法实现自己的业务;</p>
                <pre class="php">{literal}
#project\app\admin\controller\Category.php

namespace app\admin\controller;
use easyadmin\app\libs\Actions;


class Category extends \easyadmin\controller\Admin
{

    /**
     * 查看详情按钮默认配置, 可根据自己的业务需求实现
     * @param Actions $action
     * @throws ExceptionAlias
     */
    protected function configShowAction(Actions $action)
    {
        $id = $this->request->get($this->pk);
        if (empty($id)) return;

        $params = [
            $this->pk => $id
        ];

        $action
            ->addAction('返回', 'javascript:', [
                'icon' => 'layui-icon layui-icon-return',
                'class' => ['layui-btn-primary'],
                'params' => $params,
                'referer' => true,
            ])
            ->addAction('编辑', 'edit', [
                'icon' => 'layui-icon layui-icon-edit',
                'class' => [''],
                'params' => $params
            ])
            ->addAction('删除', 'delete', [
                'icon' => 'layui-icon layui-icon-delete',
                'class' => ['layui-btn-danger'],
                'confirm' => '确定要删除数据吗?',
                'params' => $params
            ]);
    }


}

{/literal}</pre>


            </div>
        </fieldset>


        <p>所有的按钮都是用的 easyadmin\app\libs\Btn 类 具体的参数 <a href="{:url('btn')}">详见 addAction 方法说明</a></p>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>自定义按钮</legend>
            <div class="layui-field-box">
                <b>修改按钮模板:</b> 可通过 options 选项种的 template 属性渲染自己的按钮模板

                <pre class="php">
#project\app\admin\controller\Category.php

namespace app\admin\controller;
use easyadmin\app\libs\PageList;

class Category extends \easyadmin\controller\Admin
{

    /**
     * 配置列表页面
     * @param PageList $page
     */
    protected function configList(PageList $page)
    {
        //指定 按钮的模板路径
        $page->addAction('查看', 'show', [

            //会查找 project\app\admin\views\test\btn.html 文件 进行渲染按钮
            'template'=>'test:btn'
        ]);
    }
}
        </pre>

                <p>页面可用的变量</p>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>字段</th>
                        <th>说明</th>
                        <th>类型</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>label</td>
                        <td>按钮的显示文字</td>
                        <td>string</td>
                    </tr>
                    <tr>
                        <td>url</td>
                        <td>点击按钮跳转的URL</td>
                        <td>string</td>
                    </tr>
                    <tr>
                        <td>class</td>
                        <td>按钮的 class 样式名</td>
                        <td>string</td>
                    </tr>
                    <tr>
                        <td>icon</td>
                        <td>按钮的图标</td>
                        <td>string</td>
                    </tr>
                    <tr>
                        <td>confirmText</td>
                        <td>点击按钮是否显示确认弹窗 <br>
                            false : 不显示弹窗 <br>
                            一段提示文字
                        </td>
                        <td>string</td>
                    </tr>
                    <tr>
                        <td>btnType</td>
                        <td>按钮类型
                            <br> a: a 素 a 标签
                            <br> btn: layui-button a 标签 添加了 layui-button 样式
                            <br> button: button-button button标签 type button
                            <br> submit: button-submit button标签 type submit
                        </td>
                        <td>string</td>
                    </tr>
                    <tr>
                        <td>referer</td>
                        <td>options 中的 referer ; 用户点击执行完成以后,是否跳转回来源页面</td>
                        <td>string</td>
                    </tr>
                    </tbody>
                </table>

                <p>具体实现代码为</p>
                <pre class="php">
#thinkeasyadmin\src\app\libs\Btn.php

namespace easyadmin\app\libs;

use easyadmin\app\libs\Template as TemplateAlias;
use think\Exception;
use think\Exception as ExceptionAlias;

class Btn
{

    /**
     * 渲染页面的按钮
     * @return string
     * @throws ExceptionAlias
     */
    public function __toString(): string
    {

        $url = $this->getUrl();

        $params = $this->getParams();

        $url = Lib::formatUrl($url, $params);

        //模板路径
        $path = $this->getTemplate();


        $data = [
            'url' => $url,
            'class' => implode(' ', $this->getClass()),
            'icon' => $this->getIcon(),
            'label' => $this->getLabel(),
            'confirmText' => $this->getIsConfirm(),
            'btnType' => $this->getBtnType(),
        ];

        if ($this->isReferer()) {
            $data['referer'] = request()->server('HTTP_REFERER');
        }else{
            $data['referer'] = '';
        }

        //渲染
        $template = new TemplateAlias();
        $template->fetch($path,$data);
        return '';
    }
}
        </pre>
                <p>
                    完整的按钮实现详见
                    <code>thinkeasyadmin\src\app\libs\Btn.php</code>
                    <code>thinkeasyadmin\src\app\libs\Actions.php</code>
                    两个类
                </p>

                <p>可通过继承或者完全重写的方式实现自己的操作按钮</p>
            </div>
        </fieldset>
    </div>
</fieldset>

<blockquote class="layui-elem-quote">关于icon</blockquote>

<p>系统默认是引入了 layui 的 icon ; 在可配置 <code>icon</code> 的地方 使用 layui-icon 的相关 class 即可</p>
<pre class="php">{literal}
->addAction($id ? '更新' : '添加', 'javascript:', [
    'icon' => 'layui-icon layui-icon-ok',
]);

# 以上配置会生成
&lt;i class=&quot;layui-icon layui-icon-ok&quot;&gt;&lt;/i&gt;
 {/literal}</pre>

<p>当然也可自己引入自己的icon; 我们这里用<code>font-awesome-4.7.0</code>举例</p>
<pre class="html">{literal}
# 步骤
# 1. 首先重写 layout.html 布局文件,在布局文件中引入 icon 的<code>css文件</code>
# 2. 使用上文的配置方式配置即可


#project\app\admin\views\layout.html

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/font-awesome-4.7.0/css/font-awesome.min.css&quot;&gt;
    .
    .
    .
    # 模板布局


# 配置
->addAction($id ? '更新' : '添加', 'javascript:', [
    'icon' => 'fa fa-user',
]);

# 以上配置会生成
&lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
{/literal}</pre>
{/block}


